<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">新闻管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>添加新闻</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>
    <span class="textFloat">新闻标题 &nbsp;&nbsp;</span>
    <el-input class="inputMax" v-model="name" placeholder="请输入内容"></el-input>
    <span class="textFloat">&nbsp;&nbsp;&nbsp;&nbsp;新闻类型 &nbsp;&nbsp;</span>
    <el-select v-model="articleType" placeholder="请选择" class="inputMax">
      <el-option
          v-for="item in articleTypes"
          :key="item.id"
          :label="item.name"
          :value="item.name">
      </el-option>
    </el-select>
    <br/>
    <br/>
    <br/>
    <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入新闻内容"
        autosize
        v-model="content">
    </el-input>
    <br/>
    <br/>
    <span class="textFloat">新闻图片 &nbsp;&nbsp;</span>

    <el-upload
        style="float: left"
        class="upload-demo"
        ref="upload"
        action="none"
        :on-change="onFile"
        :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">文件不能超过1MB</div>
    </el-upload>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <el-button type="primary" @click="doArticleInsert" v-if="id===0">添加</el-button>
    <el-button type="primary" @click="doArticleUpdate" v-else>修改</el-button>
    <el-button @click="blackArticleList">取消</el-button>
  </div>
</template>

<script>
import {
  articleById,
  articleInsert,
  articleTypeList,
  articleUpdate,
  upLoadFile} from "@/api";
import {uuid} from 'vue-uuid'
export default {
  name: "ArticleAdd",
  data() {
    return {
      id: 0,
      image: '',
      content: '',
      name: '',
      articleTypes: [],
      articleType: '',
      c_id: sessionStorage.getItem('cid'),
      formData: null,
    }
  },

  created() {
    articleTypeList().then((result)=>{
      this.articleTypes = result.data;
    });

    if (this.$route.query.id!=null){
      this.id = this.$route.query.id;
      let article = {id: this.id,c_id: this.c_id};
      articleById(article).then((result)=>{
        this.name = result.data.name;
        this.content = result.data.content;
        this.image = result.data.image;
        this.articleType = result.data.type;
      })
    }
  },

  methods: {
    onFile(file){
      if (file.size < 1048576) {
        let filename = uuid.v1();
        let type = '.' + file.name.split('.')[1];
        this.image = filename + type;
        this.formData = new FormData();
        this.formData.append("image", file.raw);
        this.formData.append("fileName", this.image);
      }else {
        this.$message.error("文件过大");
      }
    },

    doArticleInsert(){
      if (this.formData !=null) {
        let article = {
          id: this.id,
          name: this.name,
          content: this.content,
          image: this.image,
          type: this.articleType,
          c_id: this.c_id,
          status:0,
        };
        articleInsert(article);
        upLoadFile(this.formData);
        this.$router.push('/mainCom/articleList');
      }else{
        this.$message.error("文件上传失败");
      }
    },

    blackArticleList(){
      this.$router.push('/mainCom/articleList');
    },

    doArticleUpdate(){
      let article = {
        id: this.id,
        name: this.name,
        content: this.content,
        image: this.image,
        type: this.articleType,
        status:0,
      };
      let article2 = {id: this.id,image:this.image,c_id: this.c_id};
      this.$confirm('此操作将永久修改新闻信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.formData !=null) {
          upLoadFile(this.formData);
          articleUpdate(article).then(() => {
            articleById(article2).then((result) => {
              this.name = result.data.name;
              this.content = result.data.content;
              this.image = result.data.image;
              this.articleType = result.data.type;
            })
          });
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }else{
          this.$message.error("文件上传失败");
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    }
  }
}
</script>

<style scoped>
.inputMax{
  width: 200px;
  float: left;
}
.textFloat{
  float: left;
  margin-top: 6px;
}
</style>
